<script lang="ts" setup>
import BaseButton from "@/components/BaseButton/index.vue";
import BaseUpDown from "@/components/BaseUpDown/index.vue";
import useSearch from "@/hooks/useSearch";
import useData from "./hooks/useData";
import { useUserStore } from "@/stores/modules/user";
import CpuChart from "./components/CpuChart/index.vue";
import DiskChart from "./components/DiskChart/index.vue";
import MemChart from "./components/MemChart/index.vue";
import SysState from "./components/SysState/index.vue";

const { roleMap } = useData();
import { getDataByPage } from "@/api/modules/system-monitor/system-resources";
import UpdateForm from "./components/UpdateForm/index.vue";
import UpdateFormPassword from "./components/UpdateFormPassword/index.vue";

const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const { tableData, loadData, formData, reloadData } = useSearch({
  defaultData: {},
  responseKey: {
    list: "",
    total: ""
  }
});
import { ref } from "vue";

const pageData = ref({
  cpu: {},
  mem: [],
  disk: []
});
const loading = ref(false);
const init=ref(false)
async function loadDataCb() {
  loading.value = true;
  try {
    const res = await getDataByPage({
      end: 86400,
      step: 3600
    });

    // const res = {
    //   state: "success",
    //   start: 1756267680,
    //   end: 1756354080,
    //   step: 3600,
    //   data: {
    //     mem: [36, 37, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 38, 36, 36, 36, 36, 36, 36],
    //     disk: [45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 46, 46, 46, 46, 46, 46, 45],
    //     cpu: {
    //       cpu0: [15, 16, 15, 15, 16, 15, 16, 16, 16, 15, 15, 15, 16, 14, 15, 15, 15, 15, 15, 15, 15, 16, 16, 14, 16, 15],
    //       cpu1: [15, 12, 12, 11, 16, 15, 16, 16, 16, 15, 15, 15, 16, 14, 15, 15, 15, 15, 15, 15, 15, 16, 16, 14, 16, 15]
    //     },
    //     eth: {
    //       "eth1-eth2-eth3-eth4-eth5": [
    //         351120, 543728, 43248, 24376, 59472, 96680, 19520, 55864, 21040, 74296, 19328, 15968, 31840, 12744, 10432, 11920,
    //         40272, 57872, 59056, 78512, 6696, 21728, 101880, 62736, 269384, 215056
    //       ]
    //     }
    //   }
    // };
    console.log(`res::`, res);
    pageData.value = res.data;
      loading.value = false;
    setTimeout(()=>{
      init.value=true
    },1000)
  } catch (error) {
    loading.value = false;
  }
}

loadDataCb();

function reloadDataCb() {
  reloadData();
  loadData({
    api: getDataByPage,
    sendData: {
      pageNum: formData.pageNum - 1,
      pageSize: formData.pageSize
    }
  });
}

loadDataCb();

/**删除*/
import useDelete from "@/hooks/useDelete";
import { computed } from "vue";
import BaseCollapse from "@/components/BaseCollapse/index.vue";

const { deleteHandler, idList } = useDelete();

async function deleteCb(id) {
  await deleteHandler({
    api: deleteData,
    multiple: false,
    sendData: {
      id: [id]
    },
    hideMessageBox: false
  });
  loadDataCb();
}

function selectCb(data) {
  console.log(data);
  idList.value = data.rowList.map(item => item.userId);
}
</script>

<template>
  <BaseUpDown>
    <el-row>
      <el-col :span="24">
        <CpuChart v-if="init" :remoteData="pageData.cpu"></CpuChart>
      </el-col>
      <el-col :span="24">
        <MemChart v-if="init" :remoteData="pageData.mem"></MemChart>
      </el-col>
      <el-col :span="12">
        <DiskChart v-if="init" :remoteData="pageData.disk"></DiskChart>
      </el-col>
      <el-col :span="12">
        <SysState v-if="init" :remoteData="pageData"></SysState>
      </el-col>
    </el-row>
  </BaseUpDown>
</template>
